<template>
  <section>
    <div @click="clickCurrent('current')" :class="['custorm--modelbox', 'graphicfloatbtn-show floatbtnPosition', (custormCurrent == custormIndex)?'drag active':'drag']">
      <div
        v-if="custormItemData.params.isshow == '2'"
        class="noshow"
        v-bind:style="{'background-image':`url(${getPath('noshow.png')})`,'background-position':'center','background-size':'110%'}"
      ></div>
      <div :class="['es-float circle hideshadow',`style${custormItemData.style.display}`]">
        <div
          v-for="(_citem, _cindex) in custormItemData.data"
          :key="_cindex"
          class="layer background border icon"
        >
          <div class="img-icon img-center" v-bind:style="{'background-image':`url(${getPath(_citem.thumb.file_path)})`}"></div>
          <div class="text ellipsis">{{_citem.text}}</div>
        </div>
      </div>
      <div
        class="btn-edit-del"
        @click="delCurrent"
      ><span class="btn-del icon iconfont icon-close"></span></div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicfloatbtn-show {
  &.drag.floatbtnPosition {
    position: absolute !important;
    right: 10px;
    bottom: 50px;
    z-index: 1204;
  }

  .es-float {
    position: absolute;
    right: 20px;
    bottom: 50px;
    z-index: 11;
  }
  &.floatbtnPosition .es-float {
    position: static;
  }
  $layer-r: 50px;
  .es-float .layer {
    position: relative;
    width: $layer-r;
    height: auto;
    margin-top: 5px;
    text-align: center;
    box-shadow: 0 0 5px 1px #d3d3d3;
    .img-icon{
        width: 100%;
        height: $layer-r;
        border-radius: $layer-r;
    }
    .text{
			font-size: 10px;
			color: #333333;
			line-height: 1;
			margin-top: 5px;
      text-align: center;
      width: 100%;
		}
  }
  .es-float .layer:nth-of-type(1) {
    margin-top: 0;
  }
  .es-float.circle .layer {
    border-radius: 45px;
  }
  .es-float.hideshadow .layer {
    box-shadow: none;
  }
  .es-float.style1 .layer {
    color: #fff !important;
    background: inherit;
    border-color: inherit;
  }
  .es-float.style2 .layer {
    background: #fff !important;
    border-color: inherit;
    color: inherit;
  }
  .es-float .layer i {
    line-height: 40px;
    font-size: 28px;
  }
}
</style>
